<template>
  <div class="notice">
    <ul class="notice_list">
      <li class="notice_item" v-for="item in noticeList" :key="item.id">
        <div class="notice_item_fl">
          <span>{{item.create_time}}</span>
        </div>
        <div class="notice_item_fr">
          <h2>{{item.notice_name}}</h2>
          <p>{{item.notice_content}}</p>
        </div>
      </li>
      <li v-show="noMoreData" class="noMoreData">没有更多数据了</li>
    </ul>
  </div>
</template>

<script>
import { getNoticeList } from "api/notice";
import { throtTling } from "utils/throttling.js";
import { getScrollTop, getScrollHeight, getWindowHeight } from "utils/scroll";
export default {
  name: "Notice",
  data() {
    return {
      noticeList: [],
      page: 1,
      limit: 10,
      // 没有更多数据
      noMoreData: false,
    };
  },
  mounted() {
    this.getNoticeList();
    this.$nextTick(() => {
      window.addEventListener("scroll", this.menu);
    });
  },
  methods: {
    getNoticeList() {
      getNoticeList(this.$route.query.id, this.page, this.limit).then((res) => {
        if (res.code == 200) {
          this.noticeList.push(...res.data.data);
        } else {
          this.noMoreData = true;
        }
      });
    },
    menu: throtTling(function () {
      if (!this.noMoreData) {
        // 此时还有剩余数据未加载完
        let scroll = getScrollTop() + getWindowHeight() - getScrollHeight();
        if (scroll > -400) {
          //400：距离底部多少像素开始触发
          this.page += 1;
          this.getNoticeList();
        }
      }
    }, 600),
  },
  //离开删除绑定事件
  beforeDestroy() {
    this.page = 1;
    this.noMoreData = false;
    window.removeEventListener("scroll", this.menu);
  },
};
</script>

<style lang="less" scoped>
.notice {
  padding: 14px;
  font-size: 15px;
  background: #f7f9fb;
  .notice_list {
    .notice_item {
      margin-top: 16px;
      display: flex;
      padding: 18px;
      //   height: 80px;
      background: #fff;
      border-radius: 10px;
      .notice_item_fl {
        text-align: center;
        width: 100px;
        line-height: 20px;
        & :nth-child(1) {
          display: block;
        }
        & :nth-child(2) {
          font-size: 12px;
        }
      }
      .notice_item_fr {
        flex: 1;
        h2 {
          margin-bottom: 14px;
        }
        p {
          font-size: 13px;
          color: #666;
          line-height: 22px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
      }
    }
    .noMoreData {
      text-align: center;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
    }
  }
}
</style>